<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智能反馈系统 - 创新JSP页面</title>
	<link rel="stylesheet" href="css/style.css">
	<div class="nav-container">
		<div class="nav-links">
			<a href="index.jsp" class="nav-link">首页</a>

			<a href="news.jsp" class="nav-link">新闻讯息</a>
			<a href="courses.jsp" class="nav-link">微课程</a>
			<a href="about.jsp" class="nav-link">关于我们</a>
			<a href="feedback.jsp" class="nav-link">用户反馈</a>
			<a href="innovate.jsp" class="nav-link">创新点</a>
			<a href="login.jsp" class="nav-link">登录</a>
			<a href="register.jsp" class="nav-link">注册</a>

		</div>
	<style>
        /* 全局设置 */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --accent-color: #f39c12;
            --danger-color: #e74c3c;
            --light-bg: #f8f9fa;
            --dark-text: #333;
            --light-text: #fff;
            --border-radius: 8px;
            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --transition-time: 0.3s;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
            line-height: 1.6;
            padding: 20px;
        }

        a {
            text-decoration: none;
            color: var(--primary-color);
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background: var(--light-text);
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-size: 1.8rem;
        }

        .nav-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .nav-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: var(--light-text);
            border-radius: var(--border-radius);
            transition: background-color var(--transition-time);
        }

        .nav-link:hover {
            background-color: #258cd1;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-card {
            flex: 1 1 280px;
            min-width: 280px;
            background: #fff;
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            text-align: center;
            transition: transform var(--transition-time);
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 28px;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--dark-text);
        }

        input[type="text"],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: border-color var(--transition-time);
        }

        input[type="text"]:focus,
        textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }

        textarea {
            min-height: 120px;
            resize: vertical;
        }

        button {
            background-color: var(--primary-color);
            color: var(--light-text);
            border: none;
            padding: 12px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 16px;
            transition: background-color var(--transition-time);
        }

        button:hover {
            background-color: #258cd1;
        }

        .voice-btn {
            background-color: var(--secondary-color);
            margin-left: 10px;
            padding: 10px 16px;
        }

        .voice-btn:hover {
            background-color: #219150;
        }

        .ai-suggestions {
            margin-top: 10px;
            padding: 15px;
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
            border-left: 4px solid var(--primary-color);
        }

        .suggestion {
            margin: 5px 0;
            cursor: pointer;
            color: var(--primary-color);
            transition: color var(--transition-time);
        }

        .suggestion:hover {
            color: #1a6eb5;
            text-decoration: underline;
        }

        #feedbackHistory {
            margin-top: 40px;
        }

        #historyContent > div {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        #historyContent > div:last-child {
            margin-bottom: 0;
            border-bottom: none;
        }
	</style>

<body>

	<!-- 导航链接 -->


	<div class="container">

		<h1>智能反馈系统</h1>
		<a href="folder.jsp" class="nav-link">文件分类器</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="TaskManager.jsp" class="nav-link">AI任务管理工具</a>
		<!-- 创新功能展示区 -->
		<div class="features">
			<div class="feature-card">
				<div class="feature-icon">🤖</div>
				<h3>AI智能建议</h3>
				<p>实时分析您的输入并提供智能建议</p>
			</div>
			<div class="feature-card">
				<div class="feature-icon">⚡</div>
				<h3>动态加载</h3>
				<p>内容更新无需页面刷新</p>
			</div>
			<div class="feature-card">
				<div class="feature-icon">🎤</div>
				<h3>语音输入</h3>
				<p>支持语音输入内容</p>
			</div>
		</div>

		<form id="feedbackForm" action="ProcessFeedback" method="post">
			<div class="form-group">
				<label for="name">您的姓名</label>
				<input type="text" id="name" name="name" placeholder="请输入您的姓名">
			</div>

			<div class="form-group">
				<label for="email">电子邮箱</label>
				<input type="text" id="email" name="email" placeholder="请输入您的邮箱">
			</div>

			<div class="form-group">
				<label for="feedbackType">反馈类型</label>
				<select id="feedbackType" name="feedbackType">
					<option value="suggestion">建议</option>
					<option value="bug">错误报告</option>
					<option value="compliment">表扬</option>
					<option value="other">其他</option>
				</select>
			</div>

			<div class="form-group">
				<label for="message">反馈内容
					<button type="button" id="voiceInputBtn" class="voice-btn">🎤 语音输入</button>
				</label>
				<textarea id="message" name="message" placeholder="请详细描述您的反馈"></textarea>

				<!-- 创新点1: AI辅助建议区域 -->
				<div id="aiSuggestions" class="ai-suggestions" style="display:none;">
					<h4>AI建议:</h4>
					<div id="suggestionsList"></div>
				</div>
			</div>

			<button type="submit">提交反馈</button>
		</form>

		<!-- 创新点2: 动态加载的反馈历史 -->
		<div id="feedbackHistory">
			<h2>最近的反馈</h2>
			<div id="historyContent">
				<p>正在加载反馈历史...</p>
			</div>
		</div>
	</div>

	<script>
        // 创新点1: 实时AI辅助建议
        document.getElementById('message').addEventListener('input', function() {
            const message = this.value;
            if (message.length > 10) {
                setTimeout(() => {
                    const suggestions = generateAISuggestions(message);
                    displaySuggestions(suggestions);
                }, 500);
            } else {
                document.getElementById('aiSuggestions').style.display = 'none';
            }
        });

        function generateAISuggestions(text) {
            const suggestions = [];

            if (text.includes('问题')) {
                suggestions.push("您可以更详细描述遇到的问题吗？包括出现的步骤和环境。");
            }

            if (text.includes('建议')) {
                suggestions.push("感谢您的建议！您能说明这个改进会如何帮助您吗？");
            }

            if (text.length < 50) {
                suggestions.push("您的描述似乎有点简短，添加更多细节会帮助我们更好地理解。");
            }

            if (suggestions.length === 0) {
                suggestions.push("您的反馈很清晰！是否需要添加任何截图或示例来进一步说明？");
            }

            return suggestions;
        }

        function displaySuggestions(suggestions) {
            const container = document.getElementById('aiSuggestions');
            const list = document.getElementById('suggestionsList');

            list.innerHTML = '';
            suggestions.forEach(suggestion => {
                const div = document.createElement('div');
                div.className = 'suggestion';
                div.textContent = suggestion;
                div.onclick = function() {
                    document.getElementById('message').value += ' ' + suggestion;
                };
                list.appendChild(div);
            });

            container.style.display = 'block';
        }

        // 创新点2: 动态加载反馈历史
        window.addEventListener('load', function() {
            loadFeedbackHistory();
        });

        function loadFeedbackHistory() {
            setTimeout(() => {
                const historyContent = document.getElementById('historyContent');
                historyContent.innerHTML = `
                    <div>
                        <strong>张三</strong> - <em>建议</em> - <small>2023-05-15</small>
                        <p>希望能增加夜间模式功能。</p>
                    </div>
                    <div>
                        <strong>李四</strong> - <em>错误报告</em> - <small>2023-05-14</small>
                        <p>在移动设备上提交表单时按钮显示不正常。</p>
                    </div>
                    <div>
                        <strong>王五</strong> - <em>表扬</em> - <small>2023-05-12</small>
                        <p>非常喜欢这个新设计，使用起来很流畅！</p>
                    </div>
                `;
            }, 1000);
        }

        // 创新点3: 语音输入支持
        document.getElementById('voiceInputBtn').addEventListener('click', function() {
            if (!('webkitSpeechRecognition' in window)) {
                alert("您的浏览器不支持语音识别功能，请使用Chrome或Edge浏览器。");
                return;
            }

            const recognition = new webkitSpeechRecognition();
            recognition.lang = 'zh-CN';
            recognition.interimResults = false;

            recognition.onstart = function() {
                document.getElementById('voiceInputBtn').textContent = '正在聆听...';
                document.getElementById('voiceInputBtn').style.backgroundColor = '#d94f3f';
            };

            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                document.getElementById('message').value += ' ' + transcript;
            };

            recognition.onerror = function(event) {
                console.error('语音识别错误:', event.error);
            };

            recognition.onend = function() {
                document.getElementById('voiceInputBtn').textContent = '🎤 语音输入';
                document.getElementById('voiceInputBtn').style.backgroundColor = '#2ecc71';
            };

            recognition.start();
        });
    </script>

</body>
</html>
